/**
 * SPDX-FileCopyrightText: 2023-2025 Sangfor Technologies Inc.
 * SPDX-License-Identifier: Mulan PSL v2
 */
<template>
    <sf-form ref="form" class="source-log-form" :label-width="100">
        <sf-form-item>
            <sf-fieldlabel>
                <lang>{{labelName}}</lang>
            </sf-fieldlabel>
            <sf-textfield
                :placeholder="_('最多32字符')"
                v-model="formData.name"
                :maxLength="32"
                :default-width="fieldWidth"
                :allow-blank="false"
                :default-disabled="isDisabled"
                :validator="_nameValidator"
                :utf8Length="false"
            />
        </sf-form-item>
        <slot></slot>
        <sf-form-item>
            <sf-fieldlabel>
                <lang>描述</lang>
            </sf-fieldlabel>
            <sf-textarea
                v-model="formData.description"
                :placeholder="_('最多300字（选填）')"
                :maxLength="300"
                :default-width="fieldWidth"
                :allow-blank="true"
                :utf8Length="false"
                wrap="on"
            />
        </sf-form-item>
    </sf-form>
</template>

<style>
.source-log-form textarea {
    resize: none;
}
</style>

<script>
const FIELD_WIDTH = 350;
export default {
    props: { labelName: String },

    data () {
        return {
            isDisabled: false,
            formData: {
                name: '',
                description: ''
            }
        };
    },

    computed: {
        fieldWidth () {
            return FIELD_WIDTH;
        }
    },

    methods: {
        isValid () {
            if (!this.$refs.form.isValid()) {
                this.$showErr(this.$refs.form.getInvalidMsgs());
                return false;
            }
            return true;
        },
        _nameValidator (value) {
            let datasetNameReg = /^[0-9a-zA-Z\u4e00-\u9fa5][0-9a-zA-Z\u4e00-\u9fa5_]*$/;
            if (!datasetNameReg.test(value)) {
                return _('{0}只能包含中文、字母、数字、下划线（下划线不能为首字符）', this.labelName);
            }
            return true;
        },
        setJsonValue (data) {
            Object.assign(this.formData, data);
        },

        getJsonValue () {
            return this.formData;
        }
    }
};
</script>
